<template>
  <TestLayout>
    <template v-slot:main-left>
      <Institution />
    </template>
    <template v-slot:main-button>
      <mainButton
        :main-button="mainButton"
        @toMainSearch="search"
        @toMainSearchReset="reset"
      />
    </template>
    <template v-slot:search-info>
      <float-search
        offset-direction="left"
        class="float-search"
        @click="isBox = !isBox"
      />
      <searchTest
        ref="searchMain"
        size="mini"
        :label-width="labelWidth"
        :model="formData"
        :rules="searchRules"
        :item-list="formItemList"
      />
      <el-divider />
    </template>
    <template v-slot:main>
      <drawer-layout>
        <template v-slot:table-left>
          <common-table
            :data="personsArray"
            border
            :columns-item="columns"
            :title="infoTitle"
            :loading="false"
            :item-list="itemList"
            :display-column="displayColumn"
            highlight-current-row
            @checkbox-change="selectChangeEvent"
            @cell-click="cellClick"
          />
        </template>
        <template v-slot:table-right>
          <common-table
            :data="infoArray"
            border
            :columns-item="tasteColumns"
            :title="testTitle"
            :loading="false"
            :item-list="tasteList"
            :display-column="testDisplayColumn"
            @checkbox-change="selectChangeEvent"
          />
        </template>
      </drawer-layout>
    </template>
  </TestLayout>

  <!-- <health-info :dialog-visible.sync="dialogVisible" /> -->
</template>

<script>
import TestLayout from '@/components/Layout/test.vue'
import Institution from '@/components/Trees/Institution.vue'
import mainButton from '@/components/CommonButtons/MainButtonTest.vue'
import FloatSearch from '@/components/FloatSearch/index.vue'
import searchTest from '@/components/CommonForm/test.vue'
import CommonTable from '@/components/CommonTable/index.vue'
import DrawerLayout from '@/components/DrawerLayout/index.vue'
import {
  personList as persons
} from '@/simdata/personage.js'
// 加载模拟数据
import {
  infoList,
  testList,
  sexs,
  diseaseType,
  dataProps
} from '@/simdata/healthData.js'
const personList = [
  {
    label: '高',
    color: '#66FFFF'
  },
  {
    label: '糖',
    color: '#f3daf9'
  },
  {
    label: '精',
    color: '#FFCC99'
  },
  {
    label: '贫',
    color: '#BF924C'
  },
  {
    label: '新',
    color: '#3D9F54'
  },
  {
    label: '结',
    color: '#87FE03'
  }
]
const tasteList = [
  {
    label: '高',
    color: '#66FFFF'
  },
  {
    label: '糖',
    color: '#f3daf9'
  },
  {
    label: '精',
    color: '#FFCC99'
  }
]
const personColumns = [
  { prop: 'name', label: '姓名', width: '100' },
  {
    prop: 'sex',
    label: '性别',
    width: '68',
    type: 'sex',
    option: sexs
  },
  { prop: 'age', label: '年龄', width: '80' },
  { prop: 'birthdata', label: '出生日期', width: '100' },
  { prop: 'identityNumber', label: '身份证号', width: '180' },
  { prop: 'phonenumber', label: '本人电话号码', width: '150' },
  { prop: 'linkName', label: '联系人姓名', width: '100' },
  { prop: 'linkNumber', label: '联系人电话', width: '150' },
  { prop: 'nowAddress', label: '现住地址', width: '150' },
  {
    prop: 'isSign',
    label: '是否签约',
    width: '80',
    type: 'isSign',
    callback: (row) => {
      let text = ''
      switch (row.isSign) {
        case 1:
          text = '已签约'
          break
        case 2:
          text = '未签约'
          break
        default:
          text = '其他'
      }
      return text
    }
  }, //
  { prop: 'creatDoctor', label: '建档医生', width: '100' },
  { prop: 'createDate', label: '建档日期', width: '100' }
]

const tasteColumns = [
  { prop: 'name', label: '姓名', width: '100' },
  {
    prop: 'sex',
    label: '性别',
    width: '68',
    type: 'sex',
    option: sexs
  },
  { prop: 'age', label: '年龄', width: '80' },
  { prop: 'identityNumber', label: '身份证号', width: '180' },
  { prop: 'phonenumber', label: '本人电话号码', width: '150' },
  { prop: 'linkName', label: '联系人姓名', width: '100' },
  { prop: 'linkNamess', label: '审核状态', width: '100' },
  { prop: 'createDate', label: '体检日期', width: '100' },
  { prop: 'createDate11', label: '录入日期', width: '100' },
  { prop: 'linktime11', label: '录入人员', width: '100' },
  { prop: 'linktime', label: '责任医生', width: '100' }
]

export default {
  components: {
    TestLayout,
    Institution,
    mainButton,
    searchTest,
    CommonTable,
    FloatSearch,
    DrawerLayout
  },
  // directives: { resizeSpan },
  data() {
    return {
      // 配置标题显示图标颜色
      type: '人员列表',
      isBox: false,
      itemList: personList,
      tasteList: tasteList,
      // 配置常用按钮
      mainButton: [
        {
          label: '新增',
          icon: 'el-icon-circle-plus-outline',
          type: 'primary',
          handle: () => this.addHandle()
        },
        {
          label: '导出Excel',
          icon: 'el-icon-edit-outline',
          type: 'success',
          handle: () => {
            console.log('点击了')
          }
        }
      ],
      // 查询表单
      formData: {
        myInfo: 2,
        ageDate: 0,
        keyword: '', // 个人信息项 字段
        keyValue: '', // 值
        ageStart: '', // 年龄开始
        ageEnd: '', // 年龄结束
        isCheck: 0, // 是否体检
        disease: '1', // 慢病人群分类
        examine: '1', // 审核状态
        searchTime: 0, // 时间查询项目
        yearData: 1, // 年度
        createDate: '', // 建档日期 开始
        endDate: '', // 结束日期
        isDoctorCheck: 1
      },
      tasteColumns: tasteColumns,
      // label的宽度
      labelWidth: 'auto',
      // 验证
      searchRules: {
        isCheck: [
          { required: true, message: '请选择是否体检', trigger: 'change' }
        ],
        searchTime: [
          { required: true, message: '请选择时间查询项目', trigger: 'change' }
        ]
      },
      // 配置search label表单
      formItemList: [
        {
          type: 'myInformation',
          label: '个人信息查询项目',
          prop: 'myInfo',
          options: [
            { label: '全部', value: 1 },
            { label: '姓名', value: 2 },
            { label: '身份证号', value: 3 },
            { label: '家庭档案号', value: 4 },
            { label: '电话', value: 5 },
            { label: '联系人姓名', value: 6 }
          ],
          props: dataProps
        },
        {
          type: 'ageDate',
          label: '年龄段',
          prop: 'ageDate',

          options: [
            { label: '按年', value: 1 },
            { label: '按月', value: 2 }
          ],
          placeholder: ''
        },
        {
          type: 'TimeQuery',
          label: '时间查询项目',
          span: 24
        },
        {
          type: 'Select',
          label: '慢病人群分类',
          prop: 'disease',
          width: '120px',
          span: 8,
          options: diseaseType,
          props: dataProps,
          change: (row) => '',
          placeholder: '请选择...'
        },
        {
          type: 'checkType',
          label: '是否体检',
          span: 9
        },
        {
          type: 'doctorQuery',
          label: '医生查询',
          span: 16
        }
      ],
      // 所有列表数据
      infoTitle: '人员基本信息列表',
      testTitle: '体检信息列表',
      infoList: persons,
      personsArray: persons,
      infoArray: [],
      pitchRow: {},
      totalList: [],
      testList: testList,
      // 配置显示的label标签
      columns: personColumns,
      // 控制表格操作按钮的显示隐藏
      displayColumn: {
        operationCol: false,
        editBtn: false,
        removeBtn: false
      },
      testDisplayColumn: {
        operationCol: true,
        editBtn: true,
        removeBtn: true
      },
      // test配置label标签
      testColumns: [
        { prop: 'name', label: '姓名', width: '100' },
        { prop: 'sex', label: '性别', width: '68' },
        { prop: 'age', label: '年龄', width: '80' },
        { prop: 'birthdata', label: '出生日期', width: '100' },
        { prop: 'identityNumber', label: '身份证号', width: '180' },
        { prop: 'relation', label: '与户主关系', width: '100' }
      ]
    }
  },
  created() {
    for (const person of this.personsArray) {
      this.totalList.push(person)
    }
    this.infoArray = this.totalList
  },
  methods: {
    // 点击新增按钮
    addHandle() {
      console.log('点击新增了')
    },
    // 切换常用地址
    handleChange() {
      console.log('点击了')
    },
    // 点击搜索按钮
    search(formName) {
      this.$refs.searchMain.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.formData)

          // 调用接口
          this.callbackComponent()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 点击重置按钮
    reset(formName) {
      this.$refs.searchMain.$refs[formName].resetFields()
      // console.log(this.formData)
      this.formData.isCheck = ''
      this.formData.examine = ''
      this.formData.searchTime = ''
      this.formData.yearData = ''
      this.formData.createDate = ''
      this.formData.endDate = ''
    },
    // 点击搜索后，请求后台接口了
    callbackComponent() {
      console.log('调接口')
    },
    // 家庭基本信息复选框选中
    selectChangeEvent({ checked, records }) {
      console.log(checked)
      console.log(records)
    },
    switchClick() {
      if (this.type === '人员列表') {
        this.type = '体检列表'
        this.itemList = tasteList
        this.columns = tasteColumns
        this.infoTitle = '体检信息列表'
        this.displayColumn = {
          operationCol: true,
          editBtn: true,
          removeBtn: true
        }
      } else {
        this.type = '人员列表'
        this.infoTitle = '人员信息列表'
        this.itemList = personList
        this.columns = personColumns
        this.displayColumn = {
          operationCol: false,
          editBtn: false,
          removeBtn: false
        }
      }
    },
    cellClick({ row }) {
      console.log(this.pitchRow)
      if (this.pitchRow === row) {
        this.pitchRow = {}
        this.infoArray = this.totalList
      } else {
        this.pitchRow = row
        this.infoArray = row.healthtestList
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.switch {
  position: absolute;
  top: 20px;
  z-index: 100;
  margin-bottom: 10px;
}

.search-box {
  position: absolute;
  width: 300px;
  right: 0;
  top: 20px;
  background: #fff;
  bottom: 200px;
  z-index: 1;
  padding: 10px;
}
</style>
